<template>
  <div class="ind-lib-index sub-margin">
    <!-- <div class="sub-page-title">指标管理</div> -->
    <div class="content" v-if="!isLoading">
      <Empty v-if="showEmpty" @create="addCheckIndex"></Empty>
      <template v-if="!showEmpty">
        <div class="right-con">
          <IndexTable
            :source="indexList"
            @add-index="addCheckIndex"
            @search-list="searchData"
            @del-index="delIndex"
            @copy-index="copyIndex">
            <pagination
              slot="pagination"
              :page-size.sync="pageParam.pageSize"
              :total="pageParam.totalSize"
              :current-page.sync="pageParam.currentPage"
              :pageSizes="[10, 20]"
              layout="slot,prev, pager, next, sizes, jumper"
              @change="onPageChange"></pagination>
          </IndexTable>
        </div>
      </template>
    </div>
    <div class="content" v-if="isLoading">
      <!-- <Loading :isLoading="isLoading"></Loading> -->
    </div>
  </div>
</template>

<script>
import Empty from './components/Empty'
import pagination from '@com/pagination'
import IndexTable from './components/IndexTable'
import { listTopModel, deleteModel, getTenantList, copyCreate } from '@api/modules/indexModel.js'
export default {
  name: 'IndLibIndex',
  components: { Empty, pagination, IndexTable },
  props: {},
  data() {
    return {
      loading: false,
      indexList: [],
      pageParam: {
        pageSize: 10,
        currentPage: 1,
        totalSize: 0,
      },
      searchParam: {
        productId: '',
        tenantId: '',
        modelStr: '',
        modelState: '1',
      },
      tenantList: [],
      searchList: false,
      isLoading: false,
    }
  },
  computed: {
    showEmpty() {
      // return true
      return !this.searchList && this.indexList.length === 0
    },
  },
  watch: {},
  created() {
    this.isLoading = true
    this.searchList = false
    this.getTenants()
  },
  mounted() {
    this.initData()
  },
  methods: {
    // 获取租户列表
    getTenants() {
      getTenantList().then(res => {
        if (res.status === 200 && res.data) {
          this.tenantList = res.data || []
        }
      })
    },
    onPageChange(obj) {
      console.log('obj :>> ', obj)
      this.pageParam.currentPage = obj.pageNumber
      this.pageParam.pageSize = obj.pageSize
      this.initData()
    },
    initData() {
      const params = {
        ...this.pageParam,
        ...this.searchParam,
      }
      listTopModel(params)
        .then(res => {
          this.isLoading = false
          if (res.status === 200 || res.code === 0) {
            const { total = 0, records = [] } = res.data || {}
            this.pageParam.totalSize = total
            this.indexList = records || []
          }
        })
        .catch(() => {
          this.isLoading = false
        })
    },
    addCheckIndex() {
      this.$router.push({
        name: 'JXGL_INDEX_DETAIL',
        query: {
          tenantId: localStorage.pskh_tenantId,
          type: 'add',
        },
      })
    },
    searchData(data) {
      this.searchList = true
      this.searchParam = Object.assign(this.searchParam, data)
      this.pageParam.currentPage = 1
      this.initData()
    },
    delIndex(data) {
      deleteModel(data.id).then(res => {
        if (res.code === 0) {
          this.$message.success('删除模型成功')
          this.initData()
        }
      })
    },
    copyIndex(data) {
      copyCreate(data.id).then(res => {
        if (res.code === 0) {
          this.$message.success('复制创建成功')
          this.pageParam.currentPage = 1
          this.initData()
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@styles/layout.scss';

.ind-lib-index {
  height: 100%;
  display: flex;
  flex-direction: column;
  .sub-page-title {
    position: relative;

    .guide-step {
      position: absolute;
      right: 0;
      bottom: 10px;
      padding: 0;
    }
  }

  .content {
    flex: 1;
    // display: flex;
    // align-items: stretch;
    padding: 20px 0;

    .tip-txt {
      p {
        text-align: center;
      }

      .el-button {
        font-size: 16px;
      }

      .el-button + .el-button {
        margin-left: 0;
      }
    }

    .left-con {
      width: 300px;
      padding: 0 20px;
      overflow: auto;
      position: relative;
      border-right: 1px solid #e4eaf0;
    }

    .right-con {
      height: 100%;
    }
  }
}
</style>
